<template>
  <div class="modal-column">
    <div class="modal-column-full-body">
      <vxe-toolbar class-name="!size--mini">
        <template #buttons>
          <label class="mr-20px" style="font-size: 16px !important"
            >供货商：</label
          >
          <Select
            class="w-300px"
            filterable
            required
            :datas="supplierList"
            keyName="id"
            titleName="name"
            :deletable="false"
            @change="changeSupplier($event)"
            v-model="supplierId"
            placeholder="请选择供货商"
          />
          <label class="mr-20px ml-16px" style="font-size: 16px !important"
            >单据日期：</label
          >
          <DatePicker
            v-model="form.orderDate"
            :option="{ start: accountBook.checkoutDate }"
            :clearable="false"
          ></DatePicker>
        </template>
      </vxe-toolbar>
      <vxe-table
        size="mini"
        ref="xTable"
        border="border"
        :row-config="{ height: 40 }"
        show-footer
        :footer-method="footerMethod"
        stripe
        :data="productData"
      >
        <vxe-column
          title="序号"
          type="seq"
          width="60"
          align="center"
          fixed="left"
        />
        <vxe-column
          title="操作"
          field="seq"
          width="70"
          align="center"
          fixed="left"
        >
          <template #default="{ row, rowIndex }">
            <div
              class="fa fa-plus text-hover mr-5px"
              @click="adjustRows('insert', rowIndex)"
            ></div>
            <div
              class="fa fa-minus text-hover"
              v-if="isDeleting"
              @click="adjustRows('delete', rowIndex)"
            ></div>
          </template>
        </vxe-column>
        <vxe-column field="imgPath" title="产品图片" width="100">
          <template #default="{ row }">
            <img
              :src="
                productList.find((item) => item.id === row.productId)
                  ?.imgPath || '-'
              "
              alt=""
              class="product-img cursor-pointer"
              @click="
                previewImage(
                  productList.find((item) => item.id === row.productId)?.imgPath
                )
              "
            />
          </template>
        </vxe-column>
        <vxe-column title="产品信息" min-width="300">
          <template #default="{ row, rowIndex }">
            <div class="h-input-group goodsSelect" @keyup.stop="void 0">
              <Select
                ref="ms"
                @change="selectProduct($event, rowIndex)"
                v-model="row.productId"
                :datas="productList"
                filterable
                :equalWidth="false"
                placeholder="输入编码/名称"
                keyName="productId"
              >
                <template v-slot:top>
                  <table class="h-table" style="width: 100%">
                    <thead class="h-table-header">
                      <tr>
                        <td width="150" align="center">编码</td>
                        <td width="150" align="center">图片</td>
                        <td width="150" align="center">名称</td>
                        <td width="150" align="center">类别</td>
                        <td width="150" align="center">规格</td>
                      </tr>
                    </thead>
                  </table>
                </template>
                <template v-slot:item="{ item }">
                  <table>
                    <tbody class="h-table-body-table">
                      <tr>
                        <td width="150" align="center">
                          {{ item.productCode }}
                        </td>
                        <td width="150" align="center">{{ item.imageUrl }}</td>
                        <td width="150" align="center">
                          {{ item.productName }}
                        </td>
                        <td width="150" align="center">
                          {{ item.productCategoryName }}
                        </td>
                        <td width="150" align="center">{{ item.spec }}</td>
                      </tr>
                    </tbody>
                  </table>
                </template>
              </Select>
            </div>
          </template>
        </vxe-column>
        <vxe-column
          title="采购单位"
          field="secondaryUnitName"
          align="center"
          width="80"
        >
          <template #default="{ row, rowIndex }">
            <template v-if="!row.isNew">
              <Select
                v-if="row.auxiliaryUnitPrices"
                :deletable="false"
                @change="changeProductUnit($event, row)"
                v-model="row.secondaryUnitId"
                :datas="row.auxiliaryUnitPrices"
                filterable
                placeholder="输入采购单位"
                keyName="unitId"
                titleName="unitName"
              />
              <span v-else>{{ row.secondaryUnitName }}</span>
            </template>
          </template>
        </vxe-column>
        <vxe-column
            title="产品类别"
          field="categoryName"
          align="center"
          width="80"
        />
        <vxe-column title="规格型号" field="spec" align="center" width="80" />
        <vxe-column title="仓库" field="warehouse" align="center" width="120">
          <template #default="{ row, rowIndex }">
            <template v-if="!row.isNew">
              <Select
                :deletable="false"
                v-model="row.warehouseId"
                :datas="warehouseList"
                filterable
                keyName="id"
                titleName="name"
                @change="handleWarehouseChange(row, $event)"
              />
            </template>
          </template>
        </vxe-column>
        <vxe-column title="数量" field="secondaryQuantity" width="90">
          <template #default="{ row, rowIndex, columnIndex }">
            <template v-if="!row.isNew">
              <vxe-tooltip theme="light" v-if="!row.isNew">
                <template #content>
                  <div>当前库存: {{ row.currentStockQuantity || 0 }}</div>
                  <div>总库存: {{ row.totalStockQuantity || 0 }}</div>
                </template>
                <vxe-input
                  v-if="!row.isNew"
                  :id="'r' + rowIndex + '' + 3"
                  @blur="updateQuantity(row)"
                  @focus="showStockQuantity(row)"
                  ref="inputQuantity"
                  v-model.number="row.secondaryQuantity"
                  type="float"
                  min="0"
                  :controls="false"
                >
                </vxe-input>
              </vxe-tooltip>
            </template>
          </template>
        </vxe-column>
        <vxe-column
          title="基本单位"
          field="baseUnitName"
          align="center"
          width="80"
        />
        <vxe-column title="基本数量" field="quantity" width="90" />
        <vxe-column title="购货单价" field="secondaryPrice" width="100">
          <template #default="{ row, rowIndex }">
            <template v-if="!row.isNew">
              <vxe-tooltip theme="light" v-if="!row.isNew">
                <template #content>
                  <div class="recent-sales-table">
                    <table>
                      <thead>
                        <tr>
                          <th>最近采购时间</th>
                          <th>最近采购价</th>
                          <th>预计采购价</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr
                          v-for="(item, index) in recentSales || []"
                          :key="index"
                        >
                          <td>{{ item.orderDate || '-' }}</td>
                          <td>{{ item.unitPrice || '-' }}</td>
                          <td>{{ item.purchasePrice || '-' }}</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </template>
                <vxe-input
                  :id="'r' + rowIndex + '' + 4"
                  @keyup="handleEnter($event, rowIndex, 4)"
                  @blur="updatePrice(row)"
                  @focus="showPrice(row.productId)"
                  v-model.number="row.secondaryPrice"
                  type="float"
                  min="0"
                  :controls="false"
                  v-if="!row.isNew"
                ></vxe-input>
              </vxe-tooltip>
            </template>
          </template>
        </vxe-column>
        <vxe-column title="折扣率(%)" field="discountRate" width="100">
          <template #default="{ row, rowIndex }">
            <vxe-input
              v-if="!row.isNew"
              :id="'r' + rowIndex + '' + 5"
              @keyup="handleEnter($event, rowIndex, 5)"
              @blur="updateDiscount(row)"
              v-model.number="row.discountRate"
              type="float"
              min="0"
              :controls="false"
            ></vxe-input>
          </template>
        </vxe-column>
        <vxe-column title="折扣额" field="discountAmount" width="100">
          <template #default="{ row, rowIndex }">
            <vxe-input
              v-if="!row.isNew"
              :id="'r' + rowIndex + '' + 6"
              @keyup="handleEnter($event, rowIndex, 6)"
              @blur="updateDiscountAmount(row)"
              v-model.number="row.discountAmount"
              type="float"
              min="0"
              :controls="false"
            ></vxe-input>
          </template>
        </vxe-column>
        <vxe-column title="购货金额" field="subtotal" width="100">
          <template #default="{ row, rowIndex }">
            <vxe-input
              v-if="!row.isNew"
              :id="'r' + rowIndex + '' + 7"
              @keyup="handleEnter($event, rowIndex, 7)"
              @blur="updateSubtotal(row)"
              v-model.number="row.subtotal"
              type="float"
              min="0"
              :controls="false"
            ></vxe-input>
          </template>
        </vxe-column>
        <vxe-column title="备注" field="remark" width="160">
          <template #default="{ row, rowIndex }">
            <vxe-input
              v-if="!row.isNew"
              :id="'r' + rowIndex + '' + 8"
              @keyup="handleEnter($event, rowIndex, 8)"
              v-model="row.remark"
              placeholder="输入备注"
              :controls="false"
            ></vxe-input>
          </template>
        </vxe-column>
      </vxe-table>
      <div class="mt-10px"></div>
      <div class="filler-panel">
        <div class="filler-item" style="flex: 1; margin: 5px 0 !important">
          <label class="mr-16px w-80px">备注说明：</label>
          <Input
            placeholder="请输入备注"
            maxlength="150"
            style="width: 90%"
            v-model="form.remarks"
          />
        </div>
      </div>
      <div class="filler-panel">
        <div class="filler-item" style="flex: 1; margin: 5px 0 !important">
          <label class="mr-16px w-80px">优惠率：</label>
          <Input v-model="form.discountRate" @blur="changeDiscountRate" />
          <label class="ml-10px mr-16px w-80px">优惠金额：</label>
          <Input v-model="form.discountAmount" @blur="changeDiscountAmount" />
          <label class="ml-16px mr-16px w-100px"
            >优惠后金额{{ recentSales.length }}：</label
          >
          <Input v-model="form.finalAmount" @blur="changeFinalAmount" />
        </div>
      </div>
    </div>
    <div class="modal-column-between bg-white-color border">
      <Button @click="closeWindow" :loading="loading"> 取消 </Button>
      <div>
        <Button color="primary" @click="saveOrder('add')" :loading="loading">
          保存并新增
        </Button>
        <Button @click="saveOrder('save')" :loading="loading"> 保存 </Button>
        <!-- 当状态为已审核时不显示,审核后订单上显示已审核图片 -->
        <Button @click="approved()" :loading="loading" v-if="form.id">
          审核
        </Button>
      </div>
    </div>
  </div>
</template>
<script>
import {confirm, loading, message} from 'heyui.ext';
import manba from 'manba';
import {CopyObj} from '@common/utils';
import PurchaseOrder from '@js/api/purchase/PurchaseOrder';
import Supplier from '@js/api/basic/Supplier';
import Warehouse from '@js/api/basic/Warehouse';
import {mapState} from 'vuex';
import PriceRecord from '@js/api/basic/PriceRecord';
import Inventory from '@js/api/inventory/Inventory';

export default {
  name: 'PurchaseOrderForm',
  props: {
    orderId: [String, Number],
    type: String
  },
  computed: {
    ...mapState(['accountBook']),
    totalAmount() {
      let total = 0;
      this.productData.forEach((val) => {
        if (val.quantity > 0) {
          total += parseFloat(val.subtotal);
        }
      });
      return total.toFixed(2);
    },
    isDeleting() {
      return this.productData.length > 1;
    }
  },
  data() {
    return {
      loading: false,
      productList: [],
      product: null,
      allFinalAmount: 0,
      warehouseList: [],
      supplierList: [],
      supplierId: null,
      warehouseId: null,
      form: {
        id: null,
        orderDate: manba().format('YYYY-MM-dd'),
        supplierId: null,
        discountAmount: 0.0,
        discountRate: 0.0,
        finalAmount: 0.0,
        totalAmount: 0.0,
        remarks: null
      },
      productData: [],
      recentSales: []
    };
  },
  watch: {
    allFinalAmount(val) {
      this.form.discountAmount = (val * this.form.discountRate * 0.01).toFixed(
        2
      );
      this.form.finalAmount = (val - this.form.discountAmount).toFixed(2);
    }
  },
  methods: {
    handleEnter(e, index, num) {
      e.$event.stopPropagation();
      if (e.$event.keyCode === 13) {
        //回车
        e.$input.blur();
        if (num === 8) {
          if (index >= this.productData.length - 2) {
            this.$refs.ms.$el.querySelector('input').click();
            this.$refs.ms.$el.querySelector('input').select();
          } else {
            let str = 'r' + (index + 1) + '' + 3;
            document.getElementById(str).querySelector('input').focus();
            document.getElementById(str).querySelector('input').select();
          }
        } else {
          let str = 'r' + index + '' + (num + 1);
          document.getElementById(str).querySelector('input').focus();
          document.getElementById(str).querySelector('input').select();
        }
      } else if (e.$event.keyCode === 38) {
        //按上
        if (index > 0) {
          e.$input.blur();
          let str = 'r' + (index - 1) + '' + num;
          document.getElementById(str).querySelector('input').focus();
          document.getElementById(str).querySelector('input').select();
        }
      } else if (e.$event.keyCode === 40) {
        //按下
        e.$input.blur();
        if (index < this.productData.length - 2) {
          let str = 'r' + (index + 1) + '' + num;
          document.getElementById(str).querySelector('input').focus();
          document.getElementById(str).querySelector('input').select();
        } else {
          this.$refs.ms.$el.querySelector('input').click();
          this.$refs.ms.$el.querySelector('input').select();
        }
      }
    },
    // 仓库选择框变化时触发
    handleWarehouseChange(row) {
      this.showStockQuantity(row);
    },

    showStockQuantity(row) {
      let productId = row.productId;
      let warehouseId = row.warehouseId;
      if (!productId) {
        console.log('请选择产品');
        return;
      }
      // 获取产品库存进行提示
      let param = {
        productId: productId,
        page: 1,
        pageSize: 1000
      };
      Inventory.list(param).then((res) => {
        const { data } = res;
        if (data && data.results) {
          let totalQuantity = 0;
          let quantity = 0;
          data.results.forEach((item) => {
            totalQuantity += Number(item.currentQuantity);
            if (Number(item.warehouseId) === Number(warehouseId)) {
              quantity = item.currentQuantity;
            }
          });
          row.currentStockQuantity = quantity;
          row.totalStockQuantity = totalQuantity;
        }
      });
    },

    //footer合计
    footerMethod({ columns, data }) {
      let sums = [];
      let quantity = 0;
      columns.forEach((column) => {
        if (
          column.property &&
          ['quantity', 'discountAmount', 'subtotal'].includes(column.property)
        ) {
          let total = 0;
          data.forEach((row) => {
            if (column.property === 'quantity') {
              let rd = row[column.property];
              if (rd) {
                quantity += Number(rd || 0);
              }
            } else {
              let rd = row[column.property];
              if (rd) {
                total += Number(rd || 0);
              }
            }
          });
          if (column.property !== 'quantity') {
            sums.push(total.toFixed(2));
          }
        }
      });
      this.allFinalAmount = sums[1];
      return [
        ['', '','', '', '', '', '', '', '', '', quantity.toFixed(0), '', ''].concat(sums)
      ];
    },

    //选择产品
    selectProduct(d, index) {
      if (d) {
        let g = {
          quantity: 1,
          secondaryQuantity: 1,
          secondaryPrice: d.price || 0,
          warehouseId: this.warehouseId || null,
          price: d.price || 0,
          discountAmount: 0.0,
          discountRate: 0.0,
          subtotal: d.price || 0,
          conversionRate: 1,
          secondaryUnitId: d.unitId,
          secondaryUnitName: d.unitName,
          baseUnitId: d.unitId,
          baseUnitName: d.unitName,
          categoryName: d.categoryName,
          spec: d.spec,
          remark: ''
        };
        this.productData[index] = Object.assign(Object.assign(g, d), d);
        if (!this.productData[index + 1]) {
          this.productData.push({ isNew: true });
        }
        this.$refs.xTable.loadData(this.productData).then(() => {
          this.$nextTick(() => {
            let str = index + '' + 3;
            let element = document.querySelector('#r' + str + ' input');
            setTimeout(() => {
              element.focus();
              element.select();
            }, 100);
          });
        });
        this.showPrice(d.productId);
      }
      this.product = null;
    },

    showPrice(productId) {
      if (!productId) {
        console.log('请选择产品');
        return;
      }
      // 获取产品库存进行提示
      let param = {
        productId: productId
      };
      PriceRecord.showPurchasePrice(param)
        .then(({ data }) => {
          this.recentSales = data || [];
          console.log(this.recentSales);
        })
        .finally(() => (this.loading = false));
    },

    //保存订单
    saveOrder(type) {
      loading('保存中....');
      if (!this.form.supplierId) {
        message.error('请选择购货商~');
        loading.close();
        return;
      }
      let productData = this.productData.filter((c) => c.quantity > 0);
      if (productData.length <= 0) {
        message.error('请选择产品~');
        loading.close();
        return;
      }
      let warehouse = this.productData.filter((c) => c.warehouseId === null);
      if (warehouse.length > 0) {
        message.error('请选择仓库~');
        loading.close();
        return;
      }
      PurchaseOrder.save({
        purchaseOrder: Object.assign(this.form, {
          totalAmount: this.allFinalAmount
        }),
        type: this.type,
        purchaseOrderItemList: productData
      })
        .then((success) => {
          if (success) {
            message('保存成功~');
            this.clearForm();
            //保存
            if (type === 'save') {
              this.closeWindow();
            }
          }
        })
        .finally(() => loading.close());
    },

    //清除Form
    clearForm() {
      this.form = {
        id: null,
        orderDate: manba().format('YYYY-MM-dd'),
        supplierId: null,
        remark: null,
        discountAmount: 0.0,
        discountRate: 0.0,
        finalAmount: 0.0
      };
      this.allFinalAmount = 0;
      this.productData = [];
      this.supplierId = null;
    },

    //添加行或减少行
    adjustRows(type, index) {
      if (type === 'insert') {
        this.productData.splice(index + 1, 0, { isNew: true });
      } else {
        this.productData.splice(index, 1);
      }
    },

    //修改供货商
    changeSupplier(e) {
      if (!e) {
        this.form.supplierId = null;
        this.productData = [{ isNew: true }];
      } else if (e.id !== this.form.supplierId) {
        if (this.productData.length > 1) {
          confirm({
            title: '系统提示',
            content: `修改供货商后，将清除已选择的产品数据，确定修改？`,
            onConfirm: () => {
              this.productData = [{ isNew: true }];
              this.form.supplierId = e.id;
              this.loadProductsBySupplier();
            }
          });
        } else {
          this.form.supplierId = e.id;
          this.productData = [{ isNew: true }];
          this.loadProductsBySupplier();
        }
      }
    },

    //根据供货商加载产品列表
    loadProductsBySupplier() {
      if (this.form.supplierId) {
        Supplier.selectProduct(this.form.supplierId)
          .then(({ data }) => {
            this.productList = data || [];
            if (!this.form.id) {
              this.productData = [{ isNew: true }];
            }
          })
          .finally(() =>
            this.$refs.xTable.loadData(this.productData).then(() => {
              this.$nextTick(() => {
                this.$refs.ms.$el.querySelector('input').click();
                this.$refs.ms.$el.querySelector('input').select();
              });
            })
          );
      }
    },

    //修改优惠率
    changeDiscountRate() {
      this.form.discountRate = parseFloat(this.form.discountRate) || 0;
      this.form.discountAmount = (
        this.allFinalAmount *
        this.form.discountRate *
        0.01
      ).toFixed(2);
      this.form.finalAmount = (
        this.allFinalAmount - this.form.discountAmount
      ).toFixed(2);
    },
    //修改优惠金额
    changeDiscountAmount() {
      this.form.discountAmount = parseFloat(this.form.discountAmount) || 0;
      this.form.finalAmount = (
        this.allFinalAmount - this.form.discountAmount
      ).toFixed(2);
      this.form.discountRate =
        this.form.discountAmount === 0
          ? 0
          : ((this.form.discountAmount / this.allFinalAmount) * 100).toFixed(2);
    },
    //修改优惠后金额
    changeFinalAmount() {
      this.form.finalAmount = parseFloat(this.form.finalAmount) || 0;
      this.form.discountAmount = (
        this.allFinalAmount - this.form.finalAmount
      ).toFixed(2);
      this.form.discountRate =
        this.form.finalAmount === 0
          ? 0
          : ((this.form.finalAmount / this.allFinalAmount) * 100).toFixed(2);
    },
    //修改产品多单位
    changeProductUnit(item, row) {
      console.log(item);
      row.secondaryUnitName = item.unitName;
      row.secondaryPrice = (item.unitPrice || 0).toFixed(2) || 0;
      row.conversionRate = item.conversionRate || 1;
      row.quantity = (row.secondaryQuantity * row.conversionRate).toFixed(2);
      row.subtotal = (row.secondaryQuantity * row.secondaryPrice).toFixed(2);
    },

    //更新数量
    updateQuantity(item) {
      item.secondaryQuantity = item.secondaryQuantity || 1;
      item.subtotal = (
        (item.secondaryQuantity *
          item.secondaryPrice *
          (100 - item.discountRate)) /
        100
      ).toFixed(2);
      item.discountAmount = (
        (item.secondaryQuantity * item.secondaryPrice * item.discountRate) /
        100
      ).toFixed(2);
      item.quantity = (
        item.secondaryQuantity * (item.conversionRate || 1)
      ).toFixed(2);
      this.$refs.xTable.updateFooter();
    },

    //更新单价
    updatePrice(item) {
      item.secondaryPrice = item.secondaryPrice || 0.0;
      item.discountAmount = (
        (item.secondaryPrice * item.secondaryQuantity * item.discountRate) /
        100
      ).toFixed(2);
      item.subtotal = (
        item.secondaryPrice * item.secondaryQuantity -
        item.discountAmount
      ).toFixed(2);
      this.$refs.xTable.updateFooter();
    },

    //更新折扣
    updateDiscount(item) {
      item.discountRate = item.discountRate || 0.0;
      item.subtotal = (
        ((item.secondaryQuantity || 0) *
          item.secondaryPrice *
          (100 - item.discountRate || 0)) /
        100
      ).toFixed(2);
      item.discountAmount = (
        (item.secondaryQuantity || 0) * item.secondaryPrice -
        item.subtotal
      ).toFixed(2);
      this.$refs.xTable.updateFooter();
    },

    //更新折扣金额
    updateDiscountAmount(item) {
      item.discountAmount = item.discountAmount || 0.0;
      item.discountRate = (
        (item.discountAmount / (item.secondaryPrice * item.secondaryQuantity)) *
          100 || 0
      ).toFixed(2);
      item.subtotal = (
        item.secondaryPrice * item.secondaryQuantity -
        item.discountAmount
      ).toFixed(2);
      this.$refs.xTable.updateFooter();
    },

    //更新折后金额
    updateSubtotal(item) {
      item.subtotal = item.subtotal || 0;
      item.secondaryPrice = (
        ((item.subtotal / (100 - item.discountRate)) * 100) /
        item.secondaryQuantity
      ).toFixed(2);
      item.discoutPrice = (item.secondaryPrice - item.subtotal).toFixed(2);
      this.$refs.xTable.updateFooter();
    },

    //审核
    approved() {
      let ids = [this.form.id];
      confirm({
        title: '审核提示',
        content: `确认审核该订单?`,
        onConfirm: () => {
          PurchaseOrder.approved('已审核', ids).then(() => {
            message('操作成功~');
            this.closeWindow();
          });
        }
      });
    },

    //关闭窗口
    closeWindow() {
      this.$store.commit('closeTabKey', this.$store.state.currentTab);
      this.$store.commit('newTab', 'PurchaseOrderList');
      // 使用 nextTick 确保在 DOM 更新后执行
      this.$nextTick(() => {
        // 通过 eventBus 或 vuex 触发刷新
        this.$store.commit('SET_TAB_DATA', { refresh: true });
      });
    }
  },
  beforeDestroy() {
    confirm({
      title: '系统提示',
      content: `确认?`,
      onConfirm: () => {}
    });
  },
  created() {
    loading('加载中....');
    Promise.all([Supplier.select(), Warehouse.select()])
      .then((results) => {
        this.supplierList = results[0].data || [];
        this.warehouseList = results[1].data || [];
        if (this.warehouseList != null) {
          this.warehouseId = this.warehouseList.find(
            (val) => val.isDefault
          )?.id;
        }
        //订单详情/编辑订单
        if (this.orderId) {
          PurchaseOrder.load(this.orderId).then(
            ({ data: { purchaseOrder, purchaseOrderItemList } }) => {
              if (purchaseOrder) {
                CopyObj(this.form, purchaseOrder);
                this.supplierId = purchaseOrder.supplierId;
                if ('copy' === this.type) {
                  this.form.id = null;
                }
              }
              this.loadProductsBySupplier();
              this.productData = purchaseOrderItemList || [];
              this.productData.push({ isNew: true });
            }
          );
        }
      })
      .finally(() => loading.close());
  }
};
</script>
<style scoped>
.recent-sales-table {
  min-width: 300px;
}

.recent-sales-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  border: 1px solid #dfe6ec;
}

.recent-sales-table th,
.recent-sales-table td {
  padding: 8px 12px;
  text-align: left;
  border: 1px solid #dfe6ec;
}

.recent-sales-table th {
  background-color: #f5f7fa;
  font-weight: bold;
  color: #606266;
}

.recent-sales-table tbody tr:hover {
  background-color: #f5f7fa;
}
</style>
